import IssueStatusBadge from "@/app/components/IssueStatusBadge";
import {ArrowUpIcon} from "@radix-ui/react-icons";
import {Table} from "@radix-ui/themes";
import Link from "next/link";
import React from 'react';
import {Issue, Status} from ".prisma/client";

export interface IssueQuery{
    status:Status;
    orderBy:keyof Issue;
    page:string;
}

interface Props{
    searchParams:IssueQuery;
    issues:Issue[];
}

const columns: { label: string; value: keyof Issue; className?: string }[] = [
    { label: "Issue", value: "title" },
    { label: "Status", value: "status", className: "hidden md:table-cell" },
    { label: "Create", value: "createAt", className: "hidden md:table-cell" },
];

export const columnNames = columns.map((column) => column.value);


const IssueTable = ({searchParams,issues}:Props) => {
    return (
        <Table.Root variant={"surface"}>
            <Table.Header>
                <Table.Row>
                    {columns.map((column)=>(
                        <Table.ColumnHeaderCell
                            key={column.value}
                            className={column.className}>
                            <Link href={{query:{...searchParams,orderBy:column.value}}}>{column.label}</Link>
                            {column.value===searchParams.orderBy&&(
                                <ArrowUpIcon className={"inline"}/>
                            )}
                        </Table.ColumnHeaderCell>
                    ))}
                </Table.Row>
            </Table.Header>
            <Table.Body>
                {issues.map((issue)=>(
                    <Table.Row key={issue.id}>
                        <Table.Cell>
                            <Link href={`/issues/${issue.id}`}> {issue.title}</Link>
                        </Table.Cell>
                        <Table.Cell><IssueStatusBadge status={issue.status}/></Table.Cell>
                        <Table.Cell>{issue.createAt.toLocaleString()}r</Table.Cell>
                    </Table.Row>
                ))}
            </Table.Body>
        </Table.Root>
    );
};

export default IssueTable;